<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<script>
// ES6提供的一个新的数据结构 Map
// Map是一个构造函数，用于创建Map实例对象
// Map类似于对象，对象的key必须是字符串，Map的key可以是任意数据类型

// 创建Map实例
let m1 = new Map();
// console.log( m1 );// Map(0) {size: 0}
// console.log( typeof m1 );// 'object'

// 创建Map时可以传入一个二维数组
let m2 = new Map([['name','老李'],['age',36],['sex','男'],[123,'abc'],[{a:1},666]]);
console.log( m2 );// Map(5) {'name' => '老李', 'age' => 36, 'sex' => '男', 123 => 'abc', {…} => 666}

let obj = {
    name: '小李',
    age: 18,
    sex: '女'
}
// Object.entries(obj)将obj对象转成一个二维数组
// console.log( Object.entries(obj) );// [['name', '小李'],['age', 18],['sex', '女']]

// 如何将obj的数据快速便捷的存储到Map中？
let m3 = new Map(Object.entries(obj));
// console.log( m3 );// Map(3) {'name' => '小李', 'age' => 18, 'sex' => '女'}

// Map的操作：

m1.set('name','小美');// 添加一个键值对
m1.set('age',21);// 添加一个键值对
m1.set('sex','男 ');// 添加一个键值对

// m1.delete('age');// 删除一个键值对

// m1.set('sex','女');// 修改某个key的值

// console.log( m1.get('name') );// '小美' 获取某个key的值

// console.log( m1.has('name') );// true  判断是否包含某个键值对
// console.log( m1.has('age') );// false  判断是否包含某个键值对

// m1.clear();// 清空数据

// console.log( m1 );

// 遍历数据：
m1.forEach((val,key,map)=>{
    console.log( key,val,map );// 'name', '小美'  'age', 21  'sex', '男 '
});

for(let kv of m1){
    console.log( kv );//  ['name', '小美'] ['age', 21] ['sex', '男 ']
}
// [k,v] = ['name', '小美'];
for(let [k,v] of m1){
    console.log( k, v );// 'name', '小美'  'age', 21  'sex', '男 '
}

</script>
</body>
</html>